<template>
  <div class="GoShopping">
    <div class="div">
      <!-- 品牌 -->
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <el-tag class="eltag">品牌</el-tag>
            <el-radio-group v-model="brand" size="small">
              <el-radio-button label="奔驰"></el-radio-button>
              <el-radio-button label="宝马"></el-radio-button>
              <el-radio-button label="大众"></el-radio-button>
              <el-radio-button label="奥迪"></el-radio-button>
              <el-radio-button label="福特"></el-radio-button>
              <el-radio-button label="现代"></el-radio-button>
              <el-radio-button label="丰田"></el-radio-button>
              <el-radio-button label="保时捷"></el-radio-button>
            </el-radio-group>
          </div>
        </el-col>
      </el-row>
      <!-- 价格 -->
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <el-tag type="success" class="eltag">价格</el-tag>
            <el-radio-group v-model="price" size="small">
              <el-radio-button label="5">0-5万</el-radio-button>
              <el-radio-button label="10">5-10万</el-radio-button>
              <el-radio-button label="20">10-20万</el-radio-button>
              <el-radio-button label="50">20-50万</el-radio-button>
              <el-radio-button label="1000">50万以上</el-radio-button>
            </el-radio-group>
          </div>
        </el-col>
      </el-row>
      <!-- 类型 -->
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <el-tag type="info" class="eltag">类型</el-tag>
            <el-radio-group v-model="model" size="small">
              <el-radio-button label="轿车"></el-radio-button>
              <el-radio-button label="SUV"></el-radio-button>
              <el-radio-button label="跑车"></el-radio-button>
              <el-radio-button label="面包车"></el-radio-button>
            </el-radio-group>
          </div>
        </el-col>
      </el-row>
      <!-- 车龄 -->
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <el-tag type="warning" class="eltag">车龄</el-tag>
            <el-radio-group v-model="car_age" size="small">
              <el-radio-button label="1">1年内</el-radio-button>
              <el-radio-button label="3">3年内</el-radio-button>
              <el-radio-button label="5">5年内</el-radio-button>
              <el-radio-button label="8">8年内</el-radio-button>
            </el-radio-group>
          </div>
        </el-col>
      </el-row>
      <!-- 里程 -->
      <el-row :gutter="5">
        <!-- 里程 -->
        <el-col :span="3.5">
          <div class="grid-content bg-purple">
            <el-dropdown @command="kilometreCommand">
              <el-button type="primary"
                >{{ kilometretitle }}公里内<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(i, l) in kilometre" :key="l" :command="i">{{ i }}公里内</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
        <!-- 排量 -->
        <el-col :span="3.5">
          <div class="grid-content bg-purple">
            <el-dropdown @command="dischargeCommand">
              <el-button type="primary"
                >{{ dischargetitle }}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(i, l) in discharge" :key="l" :command="l + 1">{{ i }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
        <!-- 排放标准 -->
        <el-col :span="3.5">
          <div class="grid-content bg-purple">
            <el-dropdown @command="standardCommand">
              <el-button type="primary"
                >{{ standardtitle }}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(i, l) in standard" :key="l" :command="i">{{ i }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
        <!-- 变竖向 -->
        <el-col :span="3.5">
          <div class="grid-content bg-purple">
            <el-dropdown @command="speedCommand">
              <el-button type="primary"> {{ speedtitle }}<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="手动">手动</el-dropdown-item>
                <el-dropdown-item command="自动">自动</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
        <!-- 座位数 -->
        <el-col :span="3.5">
          <div class="grid-content bg-purple">
            <el-dropdown @command="seatnumCommand">
              <el-button type="primary">{{ seatnumtitle }}<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(i, l) in seatnum" :key="l" :command="i">{{ i }}座</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
        <el-col :span="2">
          <span class="span">所在城市:</span>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple">
            <CityList @updataname="updataname"></CityList>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="4.5">
          <div class="grid-content bg-purple-dark">
            <el-menu
              :default-active="typeCode"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
              active-text-color="#ffd04b"
            >
              <el-menu-item index="1">严选车</el-menu-item>
              <el-menu-item index="2">自由市场</el-menu-item>
            </el-menu>
          </div>
        </el-col>
        <el-col :span="19">
          <div class="grid-content bg-purple-dark">
            <div style="margin-top: 30px; margin-left: 300px">
              <el-radio-group v-model="orderCode" size="medium">
                <el-radio-button label="2">价格<i class="el-icon-top"></i></el-radio-button>
                <el-radio-button label="1">价格<i class="el-icon-bottom"></i></el-radio-button>
                <el-radio-button label="4">发布时间<i class="el-icon-top"></i></el-radio-button>
                <el-radio-button label="3">发布时间<i class="el-icon-bottom"></i></el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="datalist" v-if="dataList">
      <ul ref="pannel" class="goods-list">
        <li v-for="item in dataList" :key="item.id">
          <el-card>
            <router-link :to="{ path: '/goods', query: { id: item.id, typeCode: typeCode } }">
              <img :src="'http://www.yocar.website:8080/yoche/img/' + item.car.photo[0]" alt="" />
              <p class="name">{{ item.car.brand }}</p>
              <p>{{ item.car.card_time | data }}年 | {{ item.car.displacement }}</p>
              <p class="price">&yen;{{ item.car.price }}万元</p>
            </router-link>
          </el-card>
        </li>
      </ul>
    </div>
    <el-empty v-else description="暂无数据" style="padding-bottom: 60px"></el-empty>
    <div class="block">
      <!-- <span class="demonstration">直接前往</span> -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageNum"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getScreenCar } from '@/api/cart'
import CityList from '@/views/components/ascader.vue'
export default {
  name: 'GoShopping',
  data() {
    return {
      dataList: [],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      tableData: [],
      kilometretitle: '行驶',
      kilometre: ['10000', '30000', '50000', '80000', '100000', '500000'],
      dischargetitle: '排量',
      discharge: ['1.0~1.9', '2.0~2.9', '3.0~3.9', '4.0~4.9', '5.0~5.9'],
      standardtitle: '排放标准',
      standard: ['国三', '国四', '国五', '国六'],
      seatnumtitle: '座位数',
      seatnum: [2, 4, 5, 7],
      speedtitle: '变速箱',
      town: '',
      //品牌
      brand: this.brand,
      //价格
      price: '',
      //车龄
      car_age: '',
      //行驶里程
      mile: '',
      //排量
      displacement: '',
      //排放标准
      emission_standard: '',
      //变速箱
      gearbox: '',
      //城市名
      city_name: '',
      //车辆类型
      model: '',
      //座位数
      seats: '',
      //当前页码
      pageNum: 1,
      //单页数量
      pageSize: 8,
      //自营车1，个人车2
      typeCode: '1',
      //价格降序1，价格升序2，时间降序3，时间升序4(默认)
      orderCode: 4
    }
  },
  components: {
    CityList
  },
  watch: {
    mile: function () {
      this.getCartList()
    },
    brand: function () {
      this.getCartList()
    },
    price: function () {
      this.getCartList()
    },
    model: function () {
      this.getCartList()
    },
    car_age: function () {
      this.getCartList()
    },
    displacement: function () {
      this.getCartList()
    },
    emission_standard: function () {
      this.getCartList()
    },
    gearbox: function () {
      this.getCartList()
    },
    // 城市
    city_name: function () {
      this.getCartList()
    },
    seats: function () {
      this.getCartList()
    },
    typeCode: function () {
      this.getCartList()
    },
    orderCode: function () {
      this.getCartList()
    }
  },
  mounted() {},
  created() {
    this.getCartList()
  },
  methods: {
    updataname(name) {
      this.city_name = name
    },
    async getCartList() {
      const res = await getScreenCar({
        //品牌
        brand: this.brand,
        //价格
        price: this.price,
        //车龄
        car_age: this.car_age,
        //行驶里程
        mile: this.mile,
        //排量
        displacement: this.displacement,
        //排放标准
        emission_standard: this.emission_standard,
        //变速箱
        gearbox: this.gearbox,
        //城市名
        city_name: this.city_name,
        //车辆类型
        model: this.model,
        //座位数
        seats: this.seats,
        //当前页码
        pageNum: this.pageNum,
        //单页数量
        pageSize: this.pageSize,
        //自营车1，个人车2
        typeCode: this.typeCode,
        orderCode: this.orderCode
      })
      this.dataList = res.data.data.map(item => {
        item.car.photo = item.car.photo.split('#')
        return item
      })
    },
    //行驶里程
    kilometreCommand(comm) {
      this.kilometretitle = comm
      this.mile = comm
    },
    // 排量
    dischargeCommand(comm) {
      this.dischargetitle = '排量' + comm
      this.displacement = comm
    },
    // 排放标准
    standardCommand(comm) {
      this.emission_standard = comm
      this.standardtitle = comm
    },
    // 变速箱
    speedCommand(comm) {
      this.gearbox = comm
      this.speedtitle = comm + '变速箱'
    },
    //座位数
    seatnumCommand(comm) {
      this.seats = comm
      this.seatnumtitle = comm + '座'
    },
    handleSelect(a) {
      this.typeCode = a
    },
    // 每页条数改变时会触发
    handleSizeChange() {
      this.getCartList()
    },
    //  当前页改变时会触发
    handleCurrentChange() {
      this.getCartList()
    }
  },
  filters: {
    data: value => {
      return new Date(value).getFullYear()
    }
  }
}
</script>
<style lang="less" scoped>
a {
  text-decoration: none;
  color: #666;
}
.div {
  background-color: #fff;
}
.span {
  display: block;
  margin-top: 23px;
  padding-left: 25px;
}
.block {
  background-color: #fff;
  display: block;
  padding: 20px;
  padding-bottom: 20px;
}
.eltag {
  margin-right: 30px;
}
.GoShopping {
  margin-top: 20px;
  min-height: 700px;
}
.grid-content {
  margin: 15px;
}
.goods-list li:nth-child(1) {
  margin-left: 0;
}

.goods-list li:nth-child(4n) {
  margin-left: 0;
}
.goods-list li:nth-child(3n) {
  margin-right: 0;
}
.goods-list {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0px;
  margin: 0;
  li {
    display: inline-block;
    list-style: none;
    margin: 9px;
    width: 388px;
    img {
      width: 348px;
      height: 232px;
    }
    p {
      font-size: 18px;
      line-height: 18px;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .price {
      color: red;
    }
  }
}
</style>
